<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<scroll-view class="grace-scroll-y" scroll-y :style="{height:height}" @scrolltolower="jiazai()">
				<view v-for="(item,index) in cloud_brush_list" :key="index" @tap="jiaoyixq(item.id)" style="margin-top: 20rpx; width:713rpx;height:170rpx;background:rgba(255,255,255,1);box-shadow:0px 2rpx 10rpx 0px rgba(0, 0, 0, 0.06);border-radius:10rpx;">
					<view class="grace-space-between" style="margin: 0 24rpx;">
						<view style="margin-top: 15rpx;">
							<image src="../../static/credit_card_record_shijian.png" style="position: relative;top: 5rpx; width: 26rpx;height: 26rpx;"></image>
							<text style="margin-left: 10rpx; font-size:24rpx;font-weight:400;color:rgba(153,153,153,1);">{{ item.create_time }}</text>
						</view>
						<view style="margin-top: 15rpx;">
							<text style="font-size:25rpx;font-weight:400;" :style="{color:item.rp_state==='交易成功'?'rgba(35,183,20,1)':item.rp_state==='系统有延迟，请耐心等待'?'rgba(247,148,7,1)':item.rp_state==='交易失败'?'rgba(255, 0, 0, 255)':'rgba(85, 85, 85, 255)'}">{{ item.rp_state }}</text>
							<image src="../../static/jiantou.png" style="margin-left: 10rpx; width: 10rpx;height: 24rpx;"></image>
						</view>
					</view>
					<view class="grace-rows">
						<view>
							<view class="grace-rows" style="margin-left: 25rpx;margin-top: 15rpx;">
								<image src="../../static/credit_card_record_zhi.png" style="width: 32rpx;height: 32rpx;"></image>
								<view style="margin-left: 10rpx; font-size:24rpx;font-weight:500;color:rgba(51,51,51,1);margin-bottom: 5rpx;">{{item.credit_num}}</view>
							</view>
							<view class="grace-rows" style="margin-left: 25rpx; margin-top: 10rpx;">
								<image src="../../static/credit_card_record_shou.png" style="width: 32rpx;height: 32rpx;"></image>
								<view style="margin-left: 10rpx; font-size:24rpx;font-weight:500;color:rgba(51,51,51,1);margin-bottom: 5rpx;">{{item.settlement_num}}</view>
							</view>
						</view>
						<view class="" style="margin-top:35rpx;position: absolute;right: 10rpx;">
							<view style="font-size:50rpx;font-weight:400;color:rgba(48,48,48,1);display: inline-block;">{{ item.bill_money }}</view>
							<view style="font-size: 30rpx;display: inline-block;">元</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				height: '',
				limit: 20,
				page: 0,
				cloud_brush_list: [], // 云刷记录数据列表
			}
		},
		onLoad: function() {
			var sysinfo = uni.getSystemInfoSync();
			this.height = (sysinfo.safeArea.height - 20) + 'px';
			this.jiazai();
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
		},
		methods: {
			// 获取云刷记录列表数据
			jiazai() {
				var vm = this;
				this.page += 1;
				vm.myPost(
					'api/cloudbrush/get_cloud_brush_list', {
						page: vm.page,
						limit: vm.limit
					},
					function(res) {
						console.log(res);
						if (res.code == 200) {
							var brush_list = res.data.data;
							for (let i = 0; i < brush_list.length; i++) {
								vm.cloud_brush_list.push(brush_list[i])
							}
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				)
			},
			// 交易详情页跳转事件
			jiaoyixq(id){
				uni.navigateTo({
					url: '/pages/Cloud_brush/transaction_details?id=' + id
				})
			}
		},
		components: {
			gracePage
		}
	}
</script>

<style>
</style>
